<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<body>

    <div id="app">
        <div>{{info.userId}}
            <div>{{info.id}}</div>
            <div>{{info.title}}</div>
            <div>{{info.body}}</div>
        </div>
    </div>

    <script>
        let config = {

            data() {
                return {
                    info: ""
                }
            },
            methods: {
                getData() {
                    axios
                        .get('https://jsonplaceholder.typicode.com/posts/2')
                        .then(response => {
                            console.log(response.data);
                            this.info = response.data;
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                },
                getPic() {
                    axios({
                        method: 'get',
                        url: 'https://www.baidu.com/favicon.ico',
                        responseType: 'stream'
                    })
                        .then(function (response) {
                            response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
                        });
                }
            }
        };
        let vm = Vue.createApp(config).mount("#app");
        vm.getData();
        vm.getPic();

        let [x, y] = [1, 2]
    console.log("x:", x, "y:", y)

    let [, , c] = [10, 20, 30]
    console.log("c:", c)

    //扩展运算符
    let [A, ...B] = [1, 2, 3, 4, 5, 6]
    console.log("A:", A, "B:", B)

    let [x2, y2 = 200] = [100] //默认值
    console.log("x2:", x2, "y2:", y2)

    //两数交换
    let x3 = 10
    let y3 = 20 ;//不加分号会报错
    [x3, y3] = [y3, x3]
    console.log("x3:", x3, "y3:", y3)

    //--- 对象解构
    let person = {
        name: '邓瑞',
        gender: '男',
        web: 'dengruicode.com'
    }

    let { name } = person
    console.log("name:", name)

    //重命名
    let { name: userName, gender, web } = person
    console.log("userName:", userName, "gender:", gender, "web:", web)

    //默认值
    let { address = "安徽" } = person
    console.log("address:", address)
    </script>
</body>

</html>